<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path=request.getContextPath();
%>    

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="/resources/css/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet">
	<script type="text/javascript" src="/resources/js/jquery-3.2.1/jquery.js"></script>
	<script type="text/javascript" src="/resources/js/jqueryvalidate/jquery.validate.js"></script>
	<script type="text/javascript" src="/resources/js/jqueryvalidate/localization/messages_zh.js"></script>
	<script type="text/javascript" src="/resources/css/bootstrap-4.3.1/js/bootstrap.js"></script>
	
<link rel="stylesheet" href="/resources/js/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="/resources/js/kindeditor/plugins/code/prettify.css" />
	<script charset="utf-8" src="/resources/js/kindeditor/kindeditor-all.js"></script>
	<script charset="utf-8" src="/resources/js/kindeditor/lang/zh-CN.js"></script>
	<script charset="utf-8" src="/resources/js/kindeditor/plugins/code/prettify.js"></script>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<a class="navbar-brand" href="/">
		   <img src="/resources/js/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
		</a>
		<a class="navbar-brand" href="#">首页</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		  <span class="navbar-toggler-icon"></span>
		</button>
	
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	      <li class="nav-item active">
	        <a class="nav-link" href="#">最热新闻<span class="sr-only">(current)</span></a>
	      </li>
	      
	      
	      <li class="nav-item">
	        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">修改文章界面</a>
	      </li>
	    </ul>
	    
	    <!--搜索框开始  -->
	    <%-- <form class="form-inline my-2 my-lg-0">
	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    </form> --%>
	    <!--搜索框结束  -->
	    
	  </div>
	</nav>

	<div class = "container-fluid" style = "margin-top:20px">
		<div class = "row">
			<div class = "col-md-3">
				<img alt="无法显示图片" src="/resources/css/img/sea.png">
			</div>
			<div class = "col-md-9">
			
			<!--表单  -->
			<form name = "addArticle" id = "form">
				<!--   id, title, content, picture, channel_id, category_id, user_id, hits,
				   hot, status, deleted, created, updated, commentCnt, articleType -->
				  <div class="form-group">
				     <label for="titleid">文章标题</label>
				    <input type="text" name="title" class="form-control" id="titleid" aria-describedby="titleHelp" value = "${article.title }">
				    <input type = "hidden" value = "${article.id }" name = "id">		    
				    <small id="titleHelp" class="form-text text-muted">请输入文章标题 最少2个汉字 最多不超过200个.</small>
				  </div>
				  
				  <div class = "row">
				  	<div class = "col-md-6">
				  		 <div class="form-group">
						    <label for="exampleFormControlSelect1">频道</label>
						    <select class="form-control" name ="channel_id" id="articleChannel">
						    </select>
				 		 </div>
				  	</div>
				  	<div class = "col-md-6">
				  		 <div class="form-group">
						    <label for="exampleFormControlSelect1">类别</label>
						    <select class="form-control" name = "category_id" id="articleCatgory" > 
						    </select>
				 		 </div>
				 
				  	</div>
				  
				  
				  </div>
				  
				  <div class="form-group">
				    <label for="exampleFormControlFile1">图片</label>
				    <input type="file" class="form-control-file" id="imgFile">
				    <img alt="无法显示图片" src="/pic/${article.picture }" width = "120px" height = "80px" onerror="javascript:this.src='/resources/js/images/3.jpg'">
				    
				  </div>
				  
				   <div class="mb-3">
					    <label for="validationTextarea">文章内容</label>
					    <textarea class="form-control is-invalid" name = "content"  id="validationTextarea" placeholder="请在这里输入文章内容" required>
					    	${article.content }
					    </textarea>
					    <div class="invalid-feedback">
					      	请在这里输入文章内容
					    </div>
					  </div>
				 
				 
				  <input type = "button" class = "btn btn-primary" value = "修改文章"  onclick = "update()">
				</form>
			
			
			
			<!--表单  -->
			</div>
		
		
		
		</div>
	</div>
<!--   id, title, content, picture, channel_id, category_id, user_id, hits,
				   hot, status, deleted, created, updated, commentCnt, articleType -->
	<script type="text/javascript">
		/*修改时文章的回显  */
		/* var chaId = ${article.channel_id};
		var catId = ${article.category_id}; 
		$("#articleChannel [value = "+2+"]").attr("selected",true);
		$("#articleCatgory [value = "+1+"]").attr("selected",true); */
		var editor1 ;
		
		$.post("/article/findChannels",function(msg){
				
				if(msg.id == 0){
					
					for(var i in msg.t){
						
						$("#articleChannel").append("<option value = "+msg.t[i].id+">"+msg.t[i].name+"</option>");	
					}	
				}
				
				
			},"json")
			
			$("#articleChannel").change(function(){
				
				var channelId = $(this).val()
				
				$("#articleCatgory").empty();
				
				 $.post("/article/findCategorys",{channelId:channelId},function(msg){
					if(msg.id == 0){
						
						for(var i in msg.t){
							
							$("#articleCatgory").append("<option value = "+msg.t[i].id+">"+msg.t[i].name+"</option>");	
						}	
					}
					
				},"json")
				
			} )
		
			KindEditor.ready(function(K) {
			var editor1 = K.create();
			prettyPrint();
			});
			
			function update(){
				alert("!!")
			var formdata=new FormData($("#form")[0]);
			
			formdata.append("content",editor1.html());
			
			
			 $.ajax({
		           type :'post',
		           url : '/article/update',
		           data : formdata,
		           cache : false,
		           processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
		           contentType : false, // 不设置Content-type请求头
		           success : function(msg){
		        	   if(msg.id==0){
		        		   alert('修改成功');
		        		   console.log(msg.id);
		        		   location = "/user/home";
		        		   
		        	   }else{
		        		   console.log(msg.id);
		        		   alert('修改失败')
		        		   
		        	   }
		           },
		           error : function(){ }
		       }) 
			
		}
			$(function(){
			KindEditor.ready(function(K) {
			
			editor1 = K.create('#validationTextarea', {
				cssPath : '/resources/js/kindeditor/plugins/code/prettify.css',
				uploadJson : '/file/uploads.do',
				fileManagerJson : 'dssd',
				allowFileManager : true,
				afterCreate : function() {
					var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
						document.forms['form'].submit();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
						document.forms['form'].submit();
					});
				}
			});
			prettyPrint();
		});
		})
	
		
	</script>


</body>
</html>